import { defineComponent, watch, ref, type PropType } from 'vue'
interface IStyle {
  color?: string
  fontSize?: string
}
export default defineComponent({
  props: {
    text: {
      type: Object as PropType<IStyle>
    },
    type: {
      type: Number
    }
  },
  setup(props) {
    const textStyle = ref<IStyle>({
      fontSize: '14px'
    })
    const startList = [
      {
        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fplc.jj20.com%2Fup%2Fallimg%2Fmx14%2F031121151458%2F210311151458-3.jpg&refer=http%3A%2F%2Fplc.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663500606&t=73021487a2ca945945c222dc2a900722',
        name: '杨幂'
      },
      {
        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx13%2F1114201R407%2F2011141R407-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663500606&t=148393f41354ce0237bdfffd1f890154',
        name: '戚薇'
      },
      {
        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg7.51tietu.net%2Fpic%2F2019-082100%2Fv0iqm1ggwo2v0iqm1ggwo2.jpg&refer=http%3A%2F%2Fimg7.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663500606&t=94edd6e16cf392681ede845ed188ff49',
        name: '秦岚'
      },
      {
        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx13%2F111520054J5%2F201115054J5-3.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663500606&t=6fc7583927ff5ca144c0a57c4d565d5f',
        name: '高圆圆'
      },
      {
        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx13%2F111420201S8%2F201114201S8-2.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663500777&t=7106b171af35b21ca6d70c3aafb64ca3',
        name: '李易峰'
      },
      {
        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmx13%2F111420192602%2F201114192602-2.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663500777&t=627409d018b501b76389009a5d0b065c',
        name: '任嘉伦'
      }
    ]
    watch(
      props,
      () => {
        textStyle.value = Object.assign(textStyle.value, props.text)
      },
      { deep: true, immediate: true }
    )
    return () => (
      <div class="w-full flex flex-wrap gap-3 mt-4 px-4 bg-white pt-1">
        {startList.map((item, index) => {
          return (
            <span class="flex flex-col items-center">
              <img
                src={item.url}
                alt=""
                class="w-full h-[141px] object-cover rounded-tl rounded-tr"
                v-show={props.type === 1}
              />
              <img
                src={item.url}
                alt=""
                class="w-full h-[107px] object-cover rounded-tl rounded-tr"
                v-show={props.type === 2}
              />
              <span style={textStyle.value}>{item.name}</span>
            </span>
          )
        })}
      </div>
    )
  }
})
